<template>
    <div class="zy-content">
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
          <Col span="4">
            <div>
              <p class="label">{{$t('doc.KeyWord')}}</p>
              <div class="ipt">
                <Input
                    clearable
                    type="text"
                    v-model="fileName"
                    :placeholder="`${$t('common.inputInfo')}`"
                    class="inputBorder"
                    :maxlength="32"
                ></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label hide-label">--</p>
              <div class="ipt">
                <Button class="search-btn" type="primary" @click="changeNum()">{{$t('common.Query')}}</Button>
                <Button
                    class="reset-btn"
                    @click="changeNum()"
                >{{ $t('common.reset') }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>
      <div class="list-layout mt16">
        <div class="btns clear">
          <span class="title">{{ $t('common.listInformation') }}</span>
          <Button  @click="importPrrShowH" v-has="'singleEduUpload'">{{$t('ledger.uploadFiles')}}</Button>
          <Button  @click="deleteAll" v-has="'singleEduDeleteAll'">{{$t('common.batchDelete')}}</Button>
        </div>
        <div class="tableContent">
          <Table :columns="columns1" :data="tableList" @on-selection-change="onSelectChange">
            <template slot-scope="{ row }" slot="fileSize">
                    <span v-if="!row.fileSize">

                    </span>
              <span v-else-if="row.fileSize < 1024">
                      {{ parseFloat(row.fileSize).toFixed(2) + 'B' }}
                    </span>
              <span v-else-if="row.fileSize < 1024 * 1024">
                      {{ parseFloat(row.fileSize / 1024 ).toFixed(2) + 'K' }}
                    </span>
              <span v-else-if="row.fileSize < 1024 * 1024 * 1024">
                      {{ parseFloat(row.fileSize / 1024 / 1024 ).toFixed(2) + 'M' }}
                    </span>
              <span v-else-if="row.fileSize < 1024 * 1024 * 1024">
                      {{ parseFloat(row.fileSize / 1024 / 1024 / 1024).toFixed(2) + 'G' }}
                    </span>
            </template>


            <template slot-scope="{ row }" slot="visitCount">
                      <span style="color: #2d8cf0; cursor: pointer" @click="numberShow(row.id, 3, true)">
                          {{ row.visitCount || 0 }}
                      </span>
            </template>
            <template slot-scope="{ row }" slot="downLoadTimes">
                  <span style="color: #2d8cf0; cursor: pointer" @click="numberShow(row.id, 2)">
                      {{ row.downLoadTimes || 0 }}
                  </span>
            </template>
            <template slot-scope="{ row }" slot="action">
              <!--                          v-show="row.previewJudge == 'true'"-->
              <span
                  class="operationBtn"
                  v-has="'singleEduStudy'"
                  @click="study(row)"
              ><i class="iconfont zy-common-xuexi"></i>{{$t('doc.study')}}</span>
              <!--                          v-show="row.realJudge == 'true'"-->
              <span
                  class="operationBtn"
                  v-has="'singleEduDown'"
                  @click="viewDocument(row)"><i class="iconfont zy-common-xiazai"></i>{{$t('doc.download')}}</span>
              <span
                  class="operationBtn"
                  v-has="'singleEduDelete'"
                  @click="(deleteModalDoc = true), (documentIds = [row.id])"><i class="iconfont zy-common-shanchu"></i>{{$t('common.Delete')}}</span>
            </template>
          </Table>
        </div>
        <div class="pageWrap mt16">
          <pageLeftTitle :total="total" :selected="documentIds.length" />
          <Page
              :total="total"
              :page-size="pageSize"
              :page-size-opts="pageSizeOption"
              :current="pageNum"
              @on-change="changePageNum"
              @on-page-size-change="changePageSize"
              show-sizer
              show-total
          />
        </div>
      </div>
        <!-- 批量导入 -->
        <docImport
            ref="docImport"
            :selectTreeId="folderHierarchyId"
            :attachmentBelongTo="3"
            @importPrrBtn="importPrrBtnH"
        ></docImport>

        <iframeModalCompent
            v-if="iframeShow"
            :iframeShow="iframeShow"
            :isStudy="studyId"
            :iframeModalSrc="iframeModalSrc"
            @closeIframe="iframeShow = false"
            @closeStudyIframe="closeStudyIframe"
        ></iframeModalCompent>

        <numberModal ref="numberModal"></numberModal>
        <Modal :mask-closable="false" v-model="deleteModalDoc"   :title="$t('common.Delete')"
               class="modal-title-layout">
          <div class="icon red">
            <i class="iconfont zy-common-shanchu"></i>
          </div>
          <p class="title">
            <span>删除后无法恢复，请确认是否删除？</span>
          </p>
            <div slot="footer">
                <Button type="default" @click="deleteModalDoc = false">{{$t('common.Cancle')}}</Button>
                <Button type="primary" @click="deleteFolderDoc">{{$t('maintenance.Confirmed')}}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import docImport from "../../knowledgeBase/modal/docImport.vue";
import iframeModalCompent from "../../knowledgeBase/modal/iframe.vue";
import numberModal from "../../knowledgeBase/modal/number.vue";

export default {
    name: "faultClassify",
    components: {docImport, iframeModalCompent, numberModal},
    data() {
        return {
            total: 0, // 总数
            pageNum: 1, // 页数
            fileName: "", // 关键字
            pageSize: 10, // 每页的个数
            pageSizeOption: [10, 20, 30],
            deleteModalDoc: false, // 删除弹窗
            documentIds: [], // 删除Id
            folderHierarchyId: null, // 文档id
            iframeShow: false, // 导入弹窗
            columns1: [
                {
                    key: "selection",
                    type: "selection",
                    width: 60,
                    align: "center",
                },
                {
                    //title: "名称",
                    title: `${this.$t('doc.Name')}`,
                    key: "fileName",
                    align: "center ",
                },
                {
                    //title: "类型",
                    title: `${this.$t('doc.Type')}`,
                    key: "suffix",
                    align: "center ",
                },
                {
                    //title: "文件大小",
                    title: `${this.$t('doc.FileSize')}`,
                    slot: "fileSize",
                    align: "center ",
                },
                {
                    //title: "描述",
                    title: `${this.$t('doc.Des')}`,
                    key: "fileDescription",
                    align: "center ",
                    width: 300,
                    ellipsis: true,
                    tooltip: true,
                },
                {
                    //title: "学习次数",
                    title: `${this.$t('doc.LearningTimes')}`,
                    align: "center ",
                    slot: "visitCount",
                },
                {
                    //title: "下载次数",
                    title: `${this.$t('doc.Download')}`,
                    align: "center ",
                    slot: "downLoadTimes",
                },
                {
                    title: `${ this.$t('common.operation') }`,
                    slot: "action",
                    width: this.util.autoWidth(250,300),
                    align: "center",
                },
            ],
            tableList: [],
            studyId: true,
        };
    },
    created() {
        this.searchList();
    },
    methods: {
        // 学习
        study(row) {
            this.iframeShow = true;
            this.studyId = row.id;
            let env = process.env.NODE_ENV;
            let origin = window.location.origin;
            let path = '/kakone';
            if (env === 'tong') {
                path = '';
            }
            this.iframeModalSrc = origin + path + `/fileServer/onlinePreview?url=${this.util.filePathToUrl(row.filePath)}`
        },
        // 关闭学习预览
        closeStudyIframe() {
            this.iframeShow = false;
            this.searchList();
        },
        // 学习次数弹窗展示
        numberShow(id, state, showExport = false) {
            this.$refs.numberModal.show(id, state, showExport);
        },
        // 下载
        viewDocument(row) {
            this.axios({
                method: "post",
                url: "/dms/operationRecord/add",
                data: {
                    documentAttachmentId: row.id,
                    operationType: 2,
                    operationTime: this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
                },
            }).then((res) => {
                if (res.code === 200) {
                    let a = document.createElement('a')
                    a.style.display = 'none'
                    a.href = this.util.filePathToUrl(row.filePath)
                    a.download = row.fileName
                    document.body.appendChild(a)
                    a.click()
                    a.remove()
                    this.searchList();
                } else {
                    this.$Message.warning({
                        content: res.msg,
                        duration: 6,
                        closable: true,
                    });
                }
            });
        },
        // 上传文件
        importPrrShowH() {
            this.$refs.docImport.show();
        },
        importPrrBtnH() {
            //批量导入点击关闭按钮=
            this.pageNum = 1;
            this.searchList();
        },
        // 删除右侧文档
        deleteFolderDoc() {
            this.axios({
                method: "post",
                url: "/dms/documentAttachment/delete",
                data: this.documentIds,
            }).then((res) => {
                if (res.code === 200) {
                    this.$Message.success("删除成功！");
                    this.searchList();
                    this.deleteModalDoc = false;
                }
            });
        },
        //分页
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        //查询列表
        searchList() {
            this.axios({
                method: "post",
                url: "/dms/documentAttachment/list",
                data: {
                    folderHierarchyId: null,
                    attachmentBelongTo: 3,
                    operationType: 3,
                    fileDescription: this.fileName,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                },
            }).then((res) => {
                if (res.code === 200) {
                    this.tableList = res.data.list;
                    this.total = res.data.total;
                }
            });
        },
        onSelectChange(selection) {
            this.documentIds = selection.map((item) => item.id);
        },

        // 批量删除
        deleteAll() {
            if (this.documentIds.length == 0) {
                this.$Message.warning({
                    content:`${ this.$t('common.deleteItems') }`,
                    duration: 6,
                    closable: true,
                });
                return;
            } else {
                this.deleteModalDoc = true;
            }
        },
    },
};
</script>

<style scoped lang="scss">
</style>


